<template>
  <div id="cesium-viewer">
    <slot />
  </div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted, markRaw } from "vue";
import app from "../main";
import {
  initViewer,
  setScene,
  loadTilesets,
  handleDefaultModelEffect,
  flyToDefaultView,
} from "@/cesiumTools/sceneManager";
import { useLineData } from "../store/index";
import { getWeather, getLine } from "@/api/line.js";
import { renderStation, renderLines, renderStationBill,  } from "@/cesiumTools/effectController";
import {renderAll} from "../cesiumTools/course"
//pinia中的函数,什么用?
const lineDataStore = useLineData();

//初始化cesium实例
Cesium.Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ODAzN2EzOS1kZDMzLTQ5Y2UtYjYxMi1jMzQxNTdiMTUzN2IiLCJpZCI6NDU5NDIsImlhdCI6MTYxNTYyNDQyOX0.BucgmI6OJ-7ixj7rcQ_Qyg45DkvdHmaLrFwyMYitLcI";

onMounted(async () => {
  //初始化cesium实例
  const viewer = initViewer("cesium-viewer");
  //获取天气数据
  const data = await getWeather();
  // console.log(data);
  //设置场景
  setScene(viewer);
  //视角飞行到默认位置
  flyToDefaultView(viewer);
  const modelUrls = [
    {
      url: "http://localhost:8888/wuhan/tileset.json",
      options: {},
    },
  ];
  //调用方法什么用,setViewer将传入的viewer保存到存储中,markRaw事vue的一个方法,它的作用是标记一个对象为“原始”，使得Vue在对该对象进行响应式处理时不会追踪这个对象的变化
  //这对于一些不需要响应式的对象（如Cesium的viewer对象）非常有用，可以提高性能。
  lineDataStore.setViewer(markRaw(viewer));
  // 加载多个3dtiles
  /* await loadTilesets(viewer, modelUrls, (tilesets) => {
    handleDefaultModelEffect(tilesets[0]);
    lineDataStore.setTileset(markRaw(tilesets[0]));
  }); */
  //加载地铁线路数据
  const lineData = await getLine();
  //设置地铁线路数据,存入pinia中
  lineDataStore.setData(lineData);
  console.log(lineData, "lineData");
  let options = lineData.map((item) => {
    return {
      positions: item.paths, // 确保返回了正确的对象
      color: Cesium.Color.fromCssColorString(item.color), // 转换16进制颜色
      name: item.name,
    };
  });
  renderAll(viewer, lineData);
  //站点数据
  let stationPositions = [];
  lineData.forEach((item) => {
    item.stationsList.forEach((station) => {
      stationPositions.push({
        positions: station.position,
        name: station.name,
        color: item.color,
        attr:{
          name:station.name,
          isChange:1?true:false,
        }
      });
    });
  });

  // console.log(options, "options");
  // console.log(stationPositions, "stationPositions");
  // 加载地铁线路
  const renderLineEntity = async () => {
    // 生成每个线路的扁平化坐标
    const flattenedPositions = options.map((item) =>
      item.positions.flatMap((pos) => [pos.lng, pos.lat])
    );

    // 遍历每一个选项并渲染线条
    // for (let index = 0; index < options.length; index++) {
    //   const item = options[index];
    //   // 调用 renderLines 方法，await 必须在 async 函数中使用
    //   const lineEntity = await renderLines(viewer, {
    //     ...item, // 复制其他属性
    //     positions: flattenedPositions[index], // 使用扁平化的坐标
    //   });

    //   // console.log(lineEntity, `Line Entity: ${item.name}`); // 打印每条线的实体
    // }

    //渲染站点
    for (let index = 0; index < stationPositions.length; index++) {
      const item = stationPositions[index];
      // const stationEntities = await renderStation(viewer, item);
      // console.log(stationEntities, `Station Entity: ${item.name}`); // 打印每条线的站点实体
      const billboardEntity = await renderStationBill(viewer, item);
      // console.log(item, "item")
      // if(index === 10){
      //   viewer.flyTo(billboardEntity.billboard);
      // }
    }
    //  //渲染站点的billboard
    // for (let index = 0; index < stationPositions.length; index++) {
    //   const item = stationPositions[index];
    //   console.log(item, "item")
      
    //   // console.log(billboardEntity, `Billboard Entity: ${item.name}`); // 打印每条线的站点billboard实体
    //   //飞行到一个实体\
    //   if(index === 0){
    //     // viewer.flyTo(billboardEntity.billboard);
    //   }
    // } 
  };
  // 调用渲染函数
  // renderLineEntity();

});
</script>
<style>
#cesium-viewer {
  width: 100%;
  height: 100%;
  pointer-events: all;
}
</style>
